import React, { PureComponent, Fragment } from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { Link } from 'react-router-dom'
import {
    ListItem,
    ListInfo,
    LoadMore
} from '../style'
class List extends PureComponent {
    render() { 
        const { list, getMoreList, page } = this.props
        return ( 
            <Fragment>
                {
                    list.map((item, index) => (
                        <Link 
                            key={item.get('id') + '' + index}
                            to={'/detail/' + item.get('id')}

                        >
                            <ListItem >
                            <img className='pic' src={item.get('imgUrl')} alt="" />
                                <ListInfo>
                                    <h3 className="title">{item.get('title')}</h3>
                                    <p className="desc">{item.get('desc')}</p>
                                </ListInfo>
                            </ListItem>
                        </Link>    
                    ))
                }
                <LoadMore onClick={ () => getMoreList(page)}>更多文章</LoadMore>
            </Fragment>
         );
    }
}

const mapState = (state) => ({
    list: state.getIn(['home', 'articleList']),
    page: state.getIn(['home', 'articlePage']),
})

const mapDispatch = (dispatch) => ({
    getMoreList(page) {
        dispatch(actionCreators.getMoreList(page))
    }
})
 
export default connect(mapState, mapDispatch)(List);